<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <style >
        *{margin: 0;
        padding:0}
        ul{
            overflow: hidden;
            width:365px;
        }
        li{
            list-style: none;
            float: left;
            width: 120px;
            text-align: center;
            border: solid 1px;
        }
    </style>
    <script src="../../static/js/min.js"></script>
    <script src="../../static/js/xhr.js"></script>
</head>
<body>
<ul id="first">
    <li>username</li>
    <li>password</li>
    <li>nickname</li>
</ul>

<button id="btn">获取数据库的用户信息</button>
</body>
    <script>
        var user_list={
            user_get:function (){
                var xhr=create_xhr()
                xhr.open('get','/user/get_user_list_server',false)
                xhr.onreadystatechange=function (){
                    if (xhr.status === 200 && xhr.readyState){
                        var text=xhr.responseText
                        {#切片成数组#}
                        var arr1=text.split('|')
                        {#遍历数组#}
                        for (i=0;i<arr1.length;i++){
                            var temp =arr1[i].split('_')
                            var name=temp[0]
                            var password=temp[1]
                            var nickname=temp[2]
                            new_html=$("<ul><li>"+name+"</li><li>"+password+"</li><li>"+nickname+"</li></ul>")
                            $("#first").append(new_html)
                        }
                    }
                }
                xhr.send(null)
            }
        }
        $(function (){
            $("#btn").click(function (){
                user_list.user_get()
            })
        })
    </script>
</html>